import ReactDOM from 'react-dom'
import React, { Component, createContext } from 'react'
import Parent from './Parent'


// 可以创建一个上下文（范围），可以给这个范围注入数据，可以在范围内任意组件消费数据
export const MyContext = createContext({})
// 提供两个组件 Provider 注入数据，确定范围  Consumer 消费数据 
console.log(MyContext);

// 根组件
class App extends Component {
  state = {
    money: 10000
  }
  updateMoney = price => {
    this.setState({ money: this.state.money - price })
  }
  render() {
    return (
      // 通过value属性注入数据
      <MyContext.Provider value={{
        money: this.state.money,
        updateMoney: this.updateMoney
      }}>
        <div className='app'>
          根组件：{this.state.money}
          <hr />
          <Parent />
        </div>
      </MyContext.Provider>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))